<template>
    <view class="page">
        <view class="search" v-if="false">
            <u-search placeholder="请输入设备编号" v-model="keyword"></u-search>
        </view>
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="info" @click="toDetails">
                    <view class="name">设备号：{{ item.facility_number }}</view>
                    <view class="status" :class="item.state == 1 ? 'a' : 'b'">{{ item.state == 1 ? '正常' : '异常' }}</view>
                </view>
                <view class="info" @click="toDetails">
                    <view class="name">设备名称：{{ item.facility_name }}</view>

                </view>

                <view class="info" @click="toDetails">
                    <view class="name">设备备注：{{ item.content }}</view>

                </view>
                <view class="info" @click="toDetails">
                    <view class="name">出厂时间：{{ item.shippingtime }}</view>

                </view>

                <view class="btn">
                    <view @click="toEdit(item)">编辑</view>
                    <view @click="del(item.id)">删除</view>
                </view>
            </view>
        </view>
        <view style="margin-top: 300rpx;" v-if="list.length == 0">
            <u-empty mode="data" text="暂无数据～">
            </u-empty>
        </view>
        <view class="add" @click="add()">+</view>
        <view style="width: 100%;height: 30rpx;"></view>
    </view>
</template>

<script>
import { facilityList, facilitydelete, facilitydetail } from "@/api/user.js"
let Qrcode = require('../../utils/reqrcode.js')
export default {
    components: {},
    props: {},
    data() {
        return {
            keyword: '',
            list: [],
            page: 1,
            pageSize: 10,
            isCard: false
        };
    },
    watch: {},
    methods: {
        toDetails() {
            // uni.navigateTo({ url: '/pages/manufacturer/details' })
        },
        toEdit(item) {
            // let info = JSON.stringify(item)
            uni.navigateTo({
                url: '/pages/manufacturer/edit?type=edit',
                success: function (res) {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
                }
            })
        },
        getList() {
            facilityList({
                page: this.page,
                pageSize: 10
            }).then(res => {
                if (this.page == 1) {
                    this.list = res.data
                } else {
                    this.list = this.list.concat(res.data)
                }
            })
        },
        add() {
            uni.navigateTo({ url: '/pages/manufacturer/edit?type=add' })
        },
        del(id) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认删除吗?',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        facilitydelete({
                            facilityIds: id
                        }).then(res => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none',
                                    mask: true
                                })
                                _this.page = 1;
                                _this.list = []
                                _this.getList()
                            }
                        })
                    }
                }
            })
        },
        scanCodeH5() {
            let _this = this;
            uni.chooseImage({
                count: 1,
                success: imgRes => {
                    Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
                    Qrcode.qrcode.callback = (codeRes) => {
                        if (codeRes.indexOf('error') >= 0) {
                            console.log('二维码识别失败')
                        } else {
                            // 二维码识别成功
                            let r = this.decodeStr(codeRes)
                            _this.getFacilitydetail(r)
                        }
                    }
                }
            })
        },
        getFacilitydetail(id) {
            facilitydetail({
                facility_number: id
            }).then(res => {
                console.log(res)

            })
        },
        // 获取文件地址函数
        getObjectURL(file) {
            var url = null
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.URL !== undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        },
        // 解码，输出：中文
        decodeStr(str) {
            var out, i, len, c;
            var char2, char3;
            out = "";
            len = str.length;
            i = 0;
            while (i < len) {
                c = str.charCodeAt(i++);
                switch (c >> 4) {
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                    case 5:
                    case 6:
                    case 7:
                        // 0xxxxxxx
                        out += str.charAt(i - 1);
                        break;
                    case 12:
                    case 13:
                        // 110x xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx 10xx xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        char3 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }
            return out;
        }
    },
    onReachBottom() {
        this.page++;
        this.getList()
    },
    onShow() {
        this.list = []
        this.getList()
    },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.page {
    // background-color: #efefef;
    width: 100%;
    min-height: 100vh;
}

.search {
    width: 100%;
    // left: 3%;
    margin: auto;
    // margin-top: 30rpx;
    height: 80rpx;
    position: fixed;
    background-color: #fff;
    top: 0rpx;
    z-index: 99999;
}

.list {
    width: 94%;
    margin: auto;
    margin-top: 30rpx;
}

.item {
    width: 100%;
    min-height: 206px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 12px 12px 12px 12px;
    margin-top: 30rpx;

    .info {
        width: 94%;
        margin: auto;
        display: flex;
        padding-top: 20rpx;

        .name {
            width: 90%;
            font-size: 30rpx;
            font-weight: 600;
        }

        .status {
            font-size: 28rpx;
            font-weight: 600;
        }

        .a {
            color: green;
        }

        .b {
            color: #dd524d;
        }
    }

    .btn {
        display: flex;
        margin-top: 30rpx;

        view:nth-child(1) {
            width: 125px;
            height: 46px;
            background: #007aff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }

        view:nth-child(2) {
            width: 125px;
            height: 46px;
            background: #dd524d;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }
    }
}

.add {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: $uni-color-primary;
    position: fixed;
    bottom: 120rpx;
    font-size: 44rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    right: 30rpx;
}
</style>